<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>使用ZXing.js扫码</title>


</head>

<body>
    <div>
        <button type="button" id="startButton">Start</button>
        <button type="button" id="resetButton">Reset</button>
    </div>
    <div>
        <video id="video" width="400" height="400" style="object-fit: cover;"></video>
    </div>
    <div id="sourceSelectPanel">
        <label for="sourceSelect">选择摄像头:</label>
        <p><select id="sourceSelect"></select></p>
    </div>

    <label>Result:</label>
    <pre><code id="result"></code></pre>
    <script type="text/javascript" src="./js/zxing.min.js"></script>
    <script type="text/javascript">
        window.addEventListener('load', function () {
            let selectedDeviceId;
            const codeReader = new ZXing.BrowserMultiFormatReader()
            codeReader.listVideoInputDevices()
                .then((videoInputDevices) => {
                    const sourceSelect = document.getElementById('sourceSelect')
                    
                    if (videoInputDevices.length >= 1) {
                        videoInputDevices.forEach((element) => {
                            const sourceOption = document.createElement('option')
                            sourceOption.text = element.label
                            sourceOption.value = element.deviceId
                            sourceSelect.appendChild(sourceOption)
                        })
                        
                        sourceSelect.onchange = () => {
                            selectedDeviceId = sourceSelect.value;
                        };
                             
                        const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                        //sourceSelectPanel.style.display = 'block'

                    }

                    document.getElementById('startButton').addEventListener('click', () => {
                        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
                            if (result) {
                                console.log(result)
                                document.getElementById('result').textContent = result.text
                            }
                            if (err && !(err instanceof ZXing.NotFoundException)) {
                                console.error(err)
                                document.getElementById('result').textContent = err
                            }
                        })
                        
                    })

                    document.getElementById('resetButton').addEventListener('click', () => {
                        codeReader.reset()
                        document.getElementById('result').textContent = '';
                        
                    })

                })
                .catch((err) => {console.error(err)});
            sourceSelect.selectedIndex=videoInputDevices.length-1;
            })
    </script>

</body>

</html>